<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>自然堂登录注册页面</title>
     <link rel="stylesheet" href="../css/base.css">
     <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
     <link href=" https://chandoweb.oss-cn-shanghai.aliyuncs.com/fz/favicon.ico" rel="icon" />
     <link rel="stylesheet" href="../css/login.css">
     <!-- <style>
          * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
          }

          ul,
          ol,
          li {
               list-style: none;
          }

          a {
               text-decoration: none;
               color: black;
          }

          /* img{display: block;} */
          body {
               background-color: #a4c5c7;
               width: 1200px;
               margin: 0 auto;
          }

          body ul {
               list-style: none;
          }

          body a {
               color: black;
               text-decoration: none;
          }

          body header {
               width: 1200px;
               height: 110px;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               -webkit-box-pack: center;
               -ms-flex-pack: center;
               justify-content: center;
          }

          body main {
               height: 4264.88px;
               width: 1200px;
               position: relative;
               background-color: white;
          }


          body header img {
               width: 150px;
               height: 45px;
               margin-top: 60px;
               font-size: 0px;
          }

          body nav {
               height: 76px;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               position: -webkit-sticky;
               position: sticky;
               top: -1px;
               left: 0;
               z-index: 2000;
               background-color: #a4c5c7;
               -ms-flex-pack: distribute;
               justify-content: space-around;
          }

          body nav .nav-logo {
               display: none;
               height: 76px;
               margin-top: 20px;
          }

          body nav .nav-logo img {
               width: 120px;
               height: 36px;
          }

          body nav ul {
               width: 848px;
               height: 100%;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               -ms-flex-pack: distribute;
               justify-content: space-around;
               -webkit-box-align: center;
               -ms-flex-align: center;
               align-items: center;
               margin: 0;
          }

          body nav ul li {
               padding-bottom: 10px;
          }

          body nav ul li:hover {
               border-bottom: 2px solid #000;
          }

          body nav ul li:hover a {
               font-weight: 600;
          }

          body nav .search {
               width: 165px;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               -ms-flex-pack: distribute;
               justify-content: space-around;
               -webkit-box-align: center;
               -ms-flex-align: center;
               align-items: center;
          }

          body nav .search a {
               display: inline-block;
               width: 33.33%;
               text-align: center;
          }

          body nav .search a img {
               width: 20px;
          }

          /* body nav .search .last img {
    margin-top: 20px;
  }
   */
          body nav .search .last span {
               font-size: 13px;
          }

          body footer {
               height: 618.2px;
               width: 1200px;
          }

          body footer h3 {
               text-align: center;
               font-size: 28px;
               color: white;
               font-weight: normal;
          }

          body footer .serviceList {
               width: 1100px;
               height: 161px;
               margin: 50px auto 0;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               -ms-flex-pack: distribute;
               justify-content: space-around;
               text-align: center;
               padding: 0;
               border-bottom: 1px solid #fff;
          }

          body footer .serviceList li {
               width: 25%;
          }

          body footer .serviceList li img {
               width: 80px;
               height: 80px;
          }

          body footer .serviceList li p {
               font-size: 16px;
               color: white;
          }

          body footer .b_left {
               width: 1100px;
               height: 164.2px;
               margin: 0 auto;
          }

          body footer .b_left ul {
               width: 1100px;
               height: 164.2px;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               padding: 0;
               -webkit-box-pack: space-evenly;
               -ms-flex-pack: space-evenly;
               justify-content: space-evenly;
          }

          body footer .b_left ul li {
               width: 96.4px;
               font-size: 13px;
               color: #fff;
          }

          body footer .b_left ul li dt {
               font-size: 16px;
               font-weight: 700;
               margin-bottom: 20px;
          }

          body footer .b_left ul li dd {
               line-height: 26px;
               margin: 0;
               height: 26px;
          }

          body footer .b_left ul li dd img {
               vertical-align: middle;
               width: 26px;
               height: 26px;
          }

          body footer .bottomBg {
               width: 1200px;
               height: 110px;
               margin-top: 60px;
               padding-top: 20px;
          }

          body footer .bottomBg p {
               text-align: center;
               font-size: 13px;
          }

          body footer .bottomBg p img {
               width: 26px;
               height: 31px;
               position: relative;
               top: 10px;
          }

          body .toTop {
               display: block;
               position: fixed;
               width: 50px;
               height: 50px;
               z-index: 2000;
               bottom: 30px;
               right: 30px;
               border: 1px solid #cccccc;
               border-radius: 50%;
          }

          body .toTop img {
               width: 100%;
               height: 100%;
          }
     </style> -->
     <style>
          body {
               background-color: #a4c5c7;
               width: 1200px;
               margin: 0 auto;
          }

          main {
               width: 1200px;
               height: 600px;
               background-color: white;
          }
     </style>
</head>

<body>
     <!-- 头部 -->
     <header>
          <img src="../img/index/logo.png" alt="">
     </header>

     <!-- 导航栏 -->
     <nav>
          <!-- 下拉logo显示 -->
          <div class="nav-logo"><img src="../img/index/logo.png" alt=""></div>
          <ul name="list" id="list">
               <li><a class="btn btn-primary btn-lg" href="./index.html?cat_one_id=热门推荐" role="button">首页</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=汽车生活" role="button">护肤</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=生活电器" role="button">面膜</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=家居生活" role="button">彩妆</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=珠宝首饰" role="button">男士</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=海外购" role="button">会员俱乐部</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=海外购" role="button">关于自然堂</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=童装玩具" role="button">专柜查询</a></li>
               <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=大家电" role="button">防伪查询</a></li>
           </ul>
   
           <div class="search">
               <a href="./list.html?cat_one_id=海外购"><img src="../img/index/search.png" alt=""></a>
               <a href="./cart.html"><img src="../img/index/cart.png" alt=""></a>
               <a href="./login.html" class="last"><img src="../img/index/personalCenter.png" alt=""><span
                       id="localUser"></span></a>
               <a href="./index.html"name="logout" class="logout"><img src="../img/index/right.png" alt=""><span
                       id="localUser"></span></a>
           </div>

     </nav>
     <!-- 内容区 -->
     <main>
          <!-- 大盒子 -->
          <div class="margin_mini">
               <div class="top">
                    <span><a href="./login.html" class="login">登录</a></span>
                    <i></i>
                    <span><a href="./register.html" class="register">注册</a></span>
               </div>
               <!-- 登录 -->
               <!-- <div class="login">
                    <form class="form-horizontal" action="./cart.html">
                         <div class="form-group">
                              <label for="username" class="col-sm-2 control-label">用户名</label>
                              <div class="col-sm-10">
                                <input name="name" type="text" class="form-control" id="username" placeholder="用户名">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="password" class="col-sm-2 control-label">密码</label>
                              <div class="col-sm-10">
                                <input name="pwd" type="password" class="form-control" id="password" placeholder="密码">
                              </div>
                            </div>
                  
                            <div class="form-group">
                              <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">登录</button>
                              </div>
                            </div>
                          </form>
                  
                          <div name="msg"></div> 
                    </form>



               </div> -->
               <div class="bot1">
                    <form class="form-horizontal" action="./cart.html">
                         <div class="form-group">
                              <label for="username" class="col-sm-2 control-label">用户名</label>
                              <div class="col-sm-10">
                                   <input name="name" type="text" class="form-control" id="username" placeholder="用户名">
                              </div>
                         </div>

                         <div class="form-group">
                              <label for="password" class="col-sm-2 control-label">密&emsp;码</label>
                              <div class="col-sm-10">
                                   <input name="pwd" type="password" class="form-control" id="password"
                                        placeholder="密码">
                              </div>
                         </div>
                         <!-- <div class="form-group">
                              <label for="email" class="col-sm-2 control-label">邮&emsp;箱</label>
                              <div class="col-sm-10">
                                <input name="email" type="email" class="form-control" id="email" placeholder="请输入邮箱">
                              </div>
                            </div> -->

                         <div class="form-group">
                              <div class="col-sm-offset-2 col-sm-10">
                                   <button type="submit" class="btn btn-default" style="display: block;
                                text-align: center;
                                width: 300px;
                                height: 44px;
                                background-color: black;
                                color: white;
                                font-size: 19px;
                                /* margin-left:20px; */
                                border: 1px solid transparent;">登录</button>
                              </div>
                         </div>
                    </form>

                    <div name="msg"></div>
                    </form>








                    <div class="bto1-right">
                         <h3>注册自然堂账户</h3>
                         <p>注册自然堂账号以便追踪您的订单,管理收货地址, 获取更多个性化信息</p>
                         <button class="button"><a href="./register.html">创建账号</a></button>

                    </div>



               </div>
               <!-- 注册 -->
               <!-- <div class="bot2">
                    <form id="form2" action="./index.html" method="post">
                         <ul>
                              <li>
                                   <span>用户名</span>:
                                   <input type="text" placeholder="请输入用户名" name="user">
                              </li>
                              <li>
                                   <span>密&emsp;码</span>:
                                   <input type="password" placeholder="请输入用户名" name="password">
                              </li>
                              <li>
                                   <span>电&emsp;话</span>:
                                   <input type="tel" placeholder="请输入电话" name="tel">
                              </li>
                              <li>
                                   <span>邮&emsp;箱</span>:
                                   <input type="email" placeholder="请输入邮箱" name="email">
                              </li>
                              <li>
                                   <span>年&emsp;龄</span>:
                                   <input type="text" placeholder="请输入年龄" name="age">
                              </li>
                              <li>
                                   <span>性&emsp;别</span>:
                                   &nbsp;<input type="radio" name="sex" class="sex_1" checked="checked"
                                        value="男">男<input type="radio" name="sex" class="sex_1"
                                        value="女">女&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                              </li>

                         </ul>
                         <input type="submit" class="submit" href="#" value="注册">
                    </form>



               </div> -->

          </div>

     </main>
     <!-- <script>
          //登录注册切换函数
          function registerHandler(e) {
               var bot1 = bto.querySelector(".bot1");
               var bot2 = bto.querySelector(".bot2");
               if (this.innerHTML === "登录") {
                    bot1.style.display = "block";
                    bot2.style.display = "none";
               } else if (this.innerHTML === "注册" || this.innerHTML === "创建账号") {
                    bot1.style.display = "none"
                    bot2.style.display = "block";

               }
          }
     </script> -->






     <footer>
          <h3 style="margin-top: 30px; color: white;">官网特别服务</h3>
          <!-- 服务图标 -->
          <ul class="serviceList">
               <li>
                    <a href=""><img src="../img/index/apply.png" alt="">
                         <p>适用申领</p>
                    </a>
               </li>
               <li>
                    <a href=""><img src="../img/index/shop.png" alt="">
                         <p>积分商城</p>
                    </a>
               </li>
               <li>
                    <a href=""><img src="../img/index/counter.png" alt="">
                         <p>专柜查询</p>
                    </a>
               </li>
               <li>
                    <a href=""><img src="../img/index/anti.png" alt="">
                         <p>防伪查询</p>
                    </a>
               </li>

          </ul>
          <!-- 官网福利 -->
          <div class="b_left">
               <ul>
                    <li>
                         <dl>
                              <dt>官网福利</dt>
                              <dd>正品保证</dd>
                              <dd>贴心售后</dd>
                              <dd>首购有礼</dd>
                              <dd>全场包邮</dd>
                         </dl>
                    </li>
                    <li>
                         <dl>
                              <dt>使用规范</dt>

                              <dd>使用条款</dd>
                              </a>

                              <dd>隐私政策</dd>
                              </a>

                              <dd>Cookies政策</dd>
                              </a>
                         </dl>
                    </li>
                    <li>
                         <dl>
                              <dt>联系我们</dt>
                              <dd>总机:</dd>
                              <dd>021-62220000</dd>
                              <dd>客服热线:</dd>
                              <dd>400-888-2788</dd>
                         </dl>
                    </li>
                    <li>
                         <dl>
                              <dt>关注我们</dt>
                              <dd>

                                   <img alt="" class="we" src="../img/index/wechart.png" />
                                   官网微信

                              </dd>
                              <dd>

                                   <img alt="" src="../img/index/weibo.png" />
                                   官网微博

                              </dd>
                         </dl>
                    </li>
               </ul>
          </div>
          <div class="bottomBg">
               <p>国家药监局提示您:化妆品不能宣称医疗作用,也没有治疗作用,宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。</p>
               <p>©2020 伽蓝(集团)股份有限公司版权所有&emsp;&emsp;&emsp;&emsp;<span><img src="../img/index/icp_ico.png"
                              alt=""></span>&emsp;沪ICP备09100493号-3</p>
          </div>

     </footer>
     <a href="#" class="toTop"><img src="../img/index/top.png" alt=""></a>


     <script src="../tools/jquery.min.js"></script>
     <script src="../js/tools.js"></script>
     <script src="../js/ajax.js"></script>
     <!-- <script src="../js/register.js"></script> -->
     <script src="../js/login.js"></script>
     <script src="../js/cookie.js"></script>
     <script src="../js/index.js"></script>

</body>

</html>